<template>
  <div class="medication-record-container">
    <div style="max-width: 900px; border-right: 1px solid #ebeef5">
      <el-config-provider :locale="locale">
        <el-calendar v-model="value">
          <template #dateCell="{ data }">
            <div :class="isSelected(data).isClock">
              {{ data.day.split('-')[2] }}
            </div>
            <span
              class="sign green"
              :style="{ backgroundColor: isSelected(data).color }"
            ></span>
          </template>
        </el-calendar>
      </el-config-provider>
    </div>
  </div>
</template>
<script>
  import { ref } from '@vue/reactivity'
  import { ElConfigProvider } from 'element-plus'
  import zhCn from 'element-plus/lib/locale/lang/zh-cn'
  import { watch } from '@vue/runtime-core'
  export default {
    name: 'XmCalendar',
    components: {
      [ElConfigProvider.name]: ElConfigProvider,
    },
    props: { recordData: Object },
    emits: ['update'],
    setup(props, context) {
      const value = ref(new Date())
      watch(
        () => value.value,
        (val) => {
          if (val) {
            console.log('val =' + JSON.stringify(val))
            context.emit('update', val)
          }
        },
        { deep: true, immediate: true }
      )
      const getClock = function (type) {
        switch (type) {
          case 1:
            return 'clock-in'
          case 2:
            return 'am-clock-in'
          case 3:
            return 'pm-clock-in'
          case 4:
            return 'no-clock-in'
        }
      }

      const isSelected = function (data) {
        if (data.day === '2022-09-29') {
        }
        let isClock = 'no-clock-in'
        let color = null
        if (data.type === 'current-month') {
          const { day } = data
          isClock = getClock(props.recordData[day] ? 1 : 4)
          color = props.recordData[day]
        }
        return { isClock, color }
      }
      return {
        value,
        isSelected,
        locale: zhCn,
      }
    },
  }
</script>
<style lang="scss">
  .medication-record-container {
    .el-calendar-table tr td:first-child {
      border-left: 0px;
    }

    .el-calendar-table tr td:last-child {
      border-right: 0px;
    }

    .el-calendar-table td {
      min-height: 110px;
      min-width: 110px;
      border-right: 0px;
      // border-bottom: 0px;
    }

    .el-calendar-table td.is-selected {
      background-color: white;
    }

    .el-calendar-table .el-calendar-day {
      height: 80px;
      line-height: 80px;
      text-align: center;
      display: flex;
      flex-flow: column;
      align-items: center;

      // justify-content: center;
      span {
        // TODO absolute和flex交叉作用
        // position: absolute;
        display: inline-block;
        width: 24px;
        height: 10px;
        border-radius: 10px;
        margin-top: 10px;

        .sign {
          display: inline-block;
          width: 24px;
          height: 10px;
          border-radius: 10px;
        }
      }
    }

    /**日期div的样式-选中*/
    .el-calendar-table .el-calendar-day {
      .clock-in {
        display: inline-block;
        width: 40px;
        height: 40px;
        line-height: 40px;
        background-color: #c5eefa;
        border-radius: 20px;
        background-color: #c5eefa;
        border-radius: 50%;
      }

      .am-clock-in {
        display: inline-block;
        width: 40px;
        height: 40px;
        line-height: 40px;
        background-color: #c5eefa;
        border-radius: 20px;
        background-image: linear-gradient(
          to bottom,
          #c5eefa,
          #c5eefa 50%,
          #fff 50%,
          #fff
        );
      }

      .pm-clock-in {
        display: inline-block;
        width: 40px;
        height: 40px;
        line-height: 40px;
        background-color: #c5eefa;
        border-radius: 20px;
        background-image: linear-gradient(
          to bottom,
          #fff,
          #fff 50%,
          #c5eefa 50%,
          #c5eefa
        );
      }

      .no-clock-in {
        display: inline-block;
        width: 40px;
        height: 40px;
        line-height: 40px;
        border: 1px solid #fb2140;
        border-radius: 50%;
      }
    }
  }
</style>
